<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>分类管理</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-table tr{
            height: 35px;
        }
        .layui-table-cell{
            height: 35px;
        }
    </style>
</head>
<body>
<table class="layui-table" lay-data="{url:'order/allOrder', page:true, id:'orderlist',toolbar:'#toptools'}" lay-filter="orderlist">
    <thead>
    <tr>
        <th lay-data="{field:'code'}" class="layui-col-md3">订单编号</th>
        <th lay-data="{field:'userid'}" class="layui-col-md1">用户id</th>
        <th lay-data="{field:'money'}" class="layui-col-md1">总金额</th>
        <th lay-data="{templet:'#updatetimeTpl'}" class="layui-col-md3">上次状态更新时间</th>
        <th lay-data="{templet:'#stateTpl'}" class="layui-col-md2">订单状态</th>


        <th lay-data="{toolbar:'#linetools'}" class="layui-col-md2">操作</th>
    </tr>
    </thead>
</table>

<script type="text/html" id="updatetimeTpl">
    {{ d.updatetime ? d.updatetime.replace('T', ', ') : '' }}
</script>

<script type="text/html" id="stateTpl">
    {{# if(d.state==0){ }}
    <span style="color: #ff8800">未支付</span>
    {{# }else if(d.state==1){ }}
    <span style="color: #22ff00">已支付</span>
    {{# }else if(d.state==2){ }}
    <span style="color: #00ffff">已发货</span>
    {{# }else if(d.state==3){ }}
    <span style="color: #0800ff">已收货</span>
    {{# }else if(d.state==4){ }}
    <span style="color: #000">订单结束</span>
    {{# }else if(d.state==6){ }}
    <span style="color: #000">支付超时</span>
    {{# } }}
</script>

<!--行内工具栏-->
<script id="linetools" type="text/html">
    {{# if(d.state==1){ }}
    <button type="button" class="layui-btn layui-btn-sm" lay-event="send">发货</button>
    {{# }else if(d.state==3){ }}
    <button type="button" class="layui-btn layui-btn-sm" lay-event="jieshu">结束订单</button>
    {{# }else if(d.state==2){ }}
    <button type="button" class="layui-btn layui-btn-sm" lay-event="jieshu">结束订单</button>
    {{# }else if(d.state==0){ }}
    <span style="color: #000">订单未支付</span>
    {{# }else if(d.state==6){ }}
    <span>订单已取消</span>
    {{# }else{ }}
    <span>订单已结束</span>
    {{# } }}
</script>
<!--头部工具栏-->
<script id="toptools" type="text/html">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="textc" placeholder="请输入订单编号" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-event="check">查询</button>
        </div>
    </div>
</script>
<script src="layui/layui.all.js"></script>
<script>
    const $ = layui.$;
    const table = layui.table;
    const form = layui.form;
    const layer = layui.layer;
    /*行内按钮监听事件*/

    table.on("tool(orderlist)", function (obj){
        let event = obj.event;
        let data = obj.data;
        if (event == 'send'){
            console.log(data)
            layer.confirm("确认要发货吗",function (){
                $.ajax({
                    url:'order/send',
                    data:{orderid:data.id},
                    async:false,
                    success:function (res){
                        layer.msg("已成功");
                        table.reload("orderlist",{page:{curr:1}});
                    }
                });
            })
        } else if (event == 'jieshu'){
            layer.confirm("确认要结束吗",function (){
                $.ajax({
                    url:'order/jieshu',
                    data:{orderid:data.id},
                    async:false,
                    success:function (res){
                        layer.msg("结束成功");
                        table.reload("orderlist",{page:{curr:1}});
                    }
                });
            })
        }
    })

    table.on("toolbar(orderlist)",function(obj){
        let event=obj.event;

        if(event==="check"){
            console.log("clickclick");
            //获取输入框中的数据
            let text=$("[name='textc']").val();
            console.log(text);
            //发送到后端  layui表格加载
            table.reload("orderlist",{where:{'text':text},page:{curr:1}});

            $("[name='textc']").val(text);
        }
    })
</script>
</body>
</html>